<template>
  <div id="swiper2">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="Img in Img">
          <router-link :to="{path:'journalDetails',query:{id:Img.id}}">
            <img style="margin: 10px 0;width: 150px;height: 200px" :src=Img.photo alt="">
            <span style="display: inline-block;width: 100px;font-weight: bold">{{Img.cname}}</span>
          </router-link>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
    export default {
      props: {
        Img:{
          type: Array,
        },
      },
      mounted() {
        setTimeout(()=>{
          let swiper2 = new Swiper('#swiper2>.swiper-container', {
            slidesPerView: 7,
            loop: true,
            autoplay:true,
          });
        },500)
      },
    }
</script>

<style scoped>
  a {
    color: #000;
  }
  .swiper-container{
    margin:20px auto;
  }
  .swiper-container .swiper-slide{
    text-align: center;
  }
</style>
